<template>
    <div ref="graph_container">
        {{device}}
    </div>
</template>

<script>
import { mxGraph, mxShape, mxConnectionConstraint, mxPoint, mxPolyline, mxEvent, mxRubberband, mxCellState } from 'mxgraph/javascript/mxClient';

export default {
    name: 'HelloWorld',
    props: {
        device: String
    },
    mounted() {
        // console.log(mxGraph)
        // console.log(mxShape)
        // console.log(mxConnectionConstraint)
        // console.log(mxPolyline)
        // console.log(mxRubberband)
        // console.log(mxCellState)

        // Creates the graph inside the given container
        let graph = new mxGraph(this.$refs.graph_container);
        graph.setPanning(true);
        graph.panningHandler.useLeftButtonForPanning = true;
        graph.setAllowDanglingEdges(false);
        graph.connectionHandler.select = false;
        graph.view.setTranslate(20, 20)
        // Enables rubberband selection
        new mxRubberband(graph)

        // Gets the default parent for inserting new cells. This
        // is normally the first child of the root (ie. layer 0).
        let parent = graph.getDefaultParent()

        // Adds cells to the model in a single step
        graph.getModel().beginUpdate()
        var img = require('mxgraph/javascript/src/images/error.gif');
        console.log(img)
        var prefix = 'shape=image;image='+img+';'
        try {
      graph.insertVertex(parent, null, 'Bottom', 60, 60, 60, 60,
      prefix+'verticalLabelPosition=bottom;verticalAlign=top');
      graph.insertVertex(parent, null, 'Top', 140, 60, 60, 60,
      prefix+'verticalLabelPosition=top;verticalAlign=bottom');
      graph.insertVertex(parent, null, 'Left', 60, 160, 60, 60,
      prefix+'labelPosition=left;align=right');
      graph.insertVertex(parent, null, 'Right', 140, 160, 60, 60,
      prefix+'labelPosition=right;align=left')
      // let v1 = graph.insertVertex(parent, null, 'Hello,', 300, 150, 80, 30);
      // let v2 = graph.insertVertex(parent, null, 'World!', 400, 300, 80, 30);
      var v1 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 20, 10, 80, 100, 'bottom');
      var v1 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 130, 10, 80, 100, 'top');
      var v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, 'image');
      var v2 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 20, 130, 140, 60, 'right');
      var v2 = graph.insertVertex(parent, null, 'First Line\nSecond Line', 180, 130, 140, 60, 'left');

      graph.insertEdge(parent, null, '', v1, v2)
    } finally {
      // Updates the display
      graph.getModel().endUpdate()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>
